<template>
    <div class="search-container">
        <!-- 顶部搜索框 -->
        <div class="search-header">
            <button class="back-btn" @click="goBack">
                <SvgIcon iconName="icon-zuojiantou" fontSize="65px" color="red"></SvgIcon>
            </button>
            <div class="search-box">
                <SvgIcon class="icon-sousuo1" iconName="icon-sousuo1" fontSize="24px" color="#999" />
                <input type="text" v-model="searchKeyword" placeholder="搜索感兴趣的内容" @focus="showSearchOptions = true"
                    @input="handleInput" @keyup.enter="performSearch">
                <button v-if="searchKeyword" class="clear-btn" @click="clearSearch">
                    <SvgIcon class="icon-clear" iconName="icon-clear" fontSize="20px" color="#999" />
                </button>
                <SvgIcon class="icon-Edit-yitusoutu" iconName="icon-Edit-yitusoutu" fontSize="28px" color="#999" />
            </div>
            <button class="cancel-btn" @click="performSearch">搜索</button>
        </div>

        <!-- 搜索类型选择 -->
        <div v-if="showSearchOptions && searchKeyword" class="search-type-selector">
            <div class="type-options">
                <button 
                    class="type-btn" 
                    :class="{ active: searchType === 'notes' }"
                    @click="setSearchType('notes')"
                >
                    <SvgIcon iconName="icon-sousuo1" fontSize="24px" />
                    <span>作品</span>
                </button>
                <button 
                    class="type-btn" 
                    :class="{ active: searchType === 'users' }"
                    @click="setSearchType('users')"
                >
                    <SvgIcon iconName="icon-sousuo1" fontSize="24px" />
                    <span>用户</span>
                </button>
            </div>
        </div>

        <!-- 搜索结果 -->
        <div v-if="searchResult.length > 0" class="search-result">
            <div class="result-item" v-for="item in searchResult" :key="item.id" @click="selectResult(item)">
                <SvgIcon class="icon-search" iconName="icon-search" fontSize="24px" color="#999" />
                <span>{{ item.name }}</span>
            </div>
        </div>

        <!-- 历史记录 -->
        <div v-if="showSearchOptions && searchHistory.length > 0" class="search-history">
            <div class="history-header">
                <h3>搜索历史</h3>
                <button class="clear-history" @click="clearHistory">
                    <SvgIcon iconName="icon-delete"></SvgIcon>
                    <span>清空历史</span>
                </button>
            </div>
            <div class="history-tags">
                <span v-for="(item, index) in searchHistory" :key="index" @click="selectHistory(item)">
                    {{ item }}
                </span>
            </div>
        </div>

        <!-- 猜你想搜 -->
        <div v-if="showSearchOptions" class="guess-search">
            <div class="section-header">
                <h3 class="section-title">猜你想搜</h3>
                <div class="section-actions">
                    <button class="refresh-btn" @click="refreshGuessList">
                        <SvgIcon iconName="icon-shuaxin"></SvgIcon>
                    </button>
                    <span class="divider">|</span>
                    <button class="feedback-btn" @click="showFeedback">
                        <SvgIcon iconName="icon-sangedian"></SvgIcon>
                    </button>
                </div>
            </div>
            <div class="guess-items">
                <div class="guess-column">
                    <div class="guess-item" v-for="item in guessList.slice(0, 3)" :key="item.id"
                        @click="selectGuess(item)">
                        <div class="item-content">
                            <h4>{{ item.name }}</h4>
                            <span v-if="item.tag" class="trend-tag" :data-tag="item.tag">{{ item.tag }}</span>
                        </div>
                    </div>
                </div>
                <div class="guess-column">
                    <div class="guess-item" v-for="item in guessList.slice(3, 6)" :key="item.id"
                        @click="selectGuess(item)">
                        <div class="item-content">
                            <h4>{{ item.name }}</h4>
                            <span v-if="item.tag" class="trend-tag" :data-tag="item.tag">{{ item.tag }}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 小红书热点 -->
        <div v-if="showSearchOptions" class="hot-trends">
            <div class="trend-header">
                <SvgIcon iconName="icon-fill_xiaohuomiao"></SvgIcon>
                <h3 class="section-title">小红书热点</h3>
            </div>
            <div class="trend-items">
                <div class="trend-item" v-for="(item, index) in hotTrends" :key="item.id" :class="{ 'top-three': index < 3 }"
                    @click="goToTrend(item)">
                    <div class="trend-rank" :class="{
                        'top-one': index === 0,
                        'top-two': index === 1,
                        'top-three': index === 2
                    }">
                        {{ index + 1 }}
                    </div>
                    <div class="trend-content">
                        <h4 class="trend-title">{{ item.title }}</h4>
                        <span class="trend-tag" v-if="item.tag" :data-tag="item.tag">{{ item.tag }}</span>
                    </div>
                    <span class="hot-value">{{ item.hotValue }}</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import SvgIcon from '@/components/svgIcon'; // 注意大小写
import axios from 'axios';

export default {
    components: {
        SvgIcon  // 确保组件已注册
    },
    data() {
        return {
            searchKeyword: '',
            searchType: 'notes', // 默认搜索作品
            showSearchOptions: true,
            searchHistory: ['夏日穿搭', '咖啡拉花', '上海探店', '减脂餐', '新手化妆'],
            guessList: [
                { id: 1, name: '巴黎奥运', desc: '', tag: '爆' },
                { id: 2, name: 'AI换脸', desc: '', tag: '新' },
                { id: 3, name: '台风路径', desc: '', tag: '热' },
                { id: 4, name: '新能源车', desc: '', tag: '热' },
                { id: 5, name: '暑期旅游', desc: '', tag: '新' },
                { id: 6, name: '鸿蒙4.0', desc: '', tag: '热' },
                { id: 7, name: '预制菜', desc: '', tag: '热' },
                { id: 8, name: '电竞比赛', desc: '', tag: '新' },
                { id: 9, name: '直播带货', desc: '', tag: '热' },
                { id: 10, name: '芯片突破', desc: '', tag: '热' }
            ],
            hotTrends: [
                { id: 1, title: '上海迪士尼夏日限定活动来袭：全新水上巡游和夜间烟花秀等你来体验', subtitle: '上海迪士尼夏日限定活动来袭，全新水上巡游和夜间烟花秀', hotValue: '128.5万', tag: '热' },
                { id: 2, title: '2023年最新防晒测评指南：物理防晒和化学防晒哪个更适合你的肤质', subtitle: '2023年最新防晒测评，物理防晒和化学防晒哪个更适合你', hotValue: '96.3万', tag: '新' },
                { id: 3, title: '30天减脂食谱大公开：低卡高蛋白健康餐让你轻松瘦身不反弹', subtitle: '30天减脂食谱大公开，低卡高蛋白让你健康瘦身不反弹', hotValue: '89.7万', tag: '热' },
                { id: 4, title: '今夏最火的10款凉鞋测评：舒适度和时尚感兼具的必备单品推荐', subtitle: '今夏最火的10款凉鞋测评，舒适度和时尚感兼具', hotValue: '75.2万' },
                { id: 5, title: '新手必学的5分钟快速妆容教程：简单步骤打造精致日常妆容', subtitle: '新手必学的5分钟快速妆容，简单步骤打造精致妆容', hotValue: '68.9万', tag: '独家' },
                { id: 6, title: '10款自制夏日饮品配方分享：清凉解暑又健康的夏日特饮', subtitle: '10款自制夏日饮品配方，清凉解暑又健康', hotValue: '56.4万' },
                { id: 7, title: '小户型收纳技巧大公开：让空间利用率提升50%的实用方法', subtitle: '小户型收纳技巧大公开，让空间利用率提升50%', hotValue: '48.1万' },
                { id: 8, title: '暑假旅行必备物品清单：照着准备不遗漏的旅行好物推荐', subtitle: '暑假旅行必备物品清单，照着准备不遗漏', hotValue: '42.7万' },
                { id: 9, title: '多肉植物养护全攻略：解决黄叶烂根等常见问题的实用技巧', subtitle: '多肉植物养护全攻略，解决黄叶烂根常见问题', hotValue: '38.5万' },
                { id: 10, title: '手机摄影技巧分享：轻松拍出高级感照片的实用小技巧', subtitle: '手机摄影技巧分享，轻松拍出高级感照片', hotValue: '32.6万' },
                { id: 11, title: '2023年露营装备推荐清单：新手入门必备的露营装备指南', subtitle: '2023年露营装备推荐清单，新手入门必备', hotValue: '30.2万', tag: '新' },
                { id: 12, title: '每日15分钟瑜伽练习指南：改善体态提升气质的简单动作', subtitle: '每日15分钟瑜伽练习，改善体态提升气质', hotValue: '28.7万' },
                { id: 13, title: '百元以内高性价比好物推荐：学生党必看的平价购物指南', subtitle: '百元以内高性价比好物推荐，学生党必看', hotValue: '26.4万', tag: '热' },
                { id: 14, title: '小个子显高穿搭法则：视觉增高5cm的穿衣搭配技巧分享', subtitle: '小个子显高穿搭法则，视觉增高5cm', hotValue: '24.9万' },
                { id: 15, title: '上海网红美食店打卡测评：避雷指南和必吃推荐清单', subtitle: '上海网红美食店打卡测评，避雷指南', hotValue: '22.3万' },
                { id: 16, title: '敏感肌护肤全攻略：修复屏障改善红血丝的护肤步骤详解', subtitle: '敏感肌护肤全攻略，修复屏障改善红血丝', hotValue: '20.8万', tag: '独家' },
                { id: 17, title: '2023年上半年最值得读的10本书推荐：提升自我的好书清单', subtitle: '2023年上半年最值得读的10本书推荐', hotValue: '18.5万' },
                { id: 18, title: '30天健身挑战计划：见证身材变化全过程的训练指南', subtitle: '30天健身挑战，见证身材变化全过程', hotValue: '16.2万' },
                { id: 19, title: 'DIY手工教程分享：制作独一无二的饰品和家居装饰品', subtitle: 'DIY手工教程分享，制作独一无二的饰品', hotValue: '14.7万' },
                { id: 20, title: '职场新人必知的10个生存法则：少走弯路的职场经验分享', subtitle: '职场新人必知的10个生存法则，少走弯路', hotValue: '12.9万' }
            ],
            searchResult: []
        }
    },
    methods: {
        goBack() {
            this.$router.go(-1); // 返回上一页
        },
        clearSearch() {
            this.searchKeyword = '';
            this.searchResult = [];
        },
        cancelSearch() {
            this.searchKeyword = '';
            this.showSearchOptions = false;
            this.searchResult = [];
        },
        handleInput() {
            if (this.searchKeyword) {
                // 根据搜索类型显示不同的建议
                if (this.searchType === 'notes') {
                    // 作品搜索建议
                    this.searchResult = this.guessList.filter(item =>
                        item.name.includes(this.searchKeyword)
                    );
                } else {
                    // 用户搜索建议
                    this.searchResult = this.guessList.filter(item =>
                        item.name.includes(this.searchKeyword)
                    );
                }
            } else {
                this.searchResult = [];
            }
        },
        setSearchType(type) {
            this.searchType = type;
            this.handleInput(); // 重新生成搜索建议
        },
        selectResult(item) {
            this.searchKeyword = item.name;
            this.addToHistory(item.name);
            this.searchResult = [];
            // 执行搜索逻辑
            this.performSearch();
        },
        addToHistory(keyword) {
            // 检查是否已存在
            const index = this.searchHistory.indexOf(keyword);
            if (index !== -1) {
                // 如果存在，移到最前面
                this.searchHistory.splice(index, 1);
            }
            // 添加到最前面
            this.searchHistory.unshift(keyword);
            // 限制历史记录数量
            if (this.searchHistory.length > 10) {
                this.searchHistory.pop();
            }
        },
        selectHistory(keyword) {
            this.searchKeyword = keyword;
            this.searchResult = [];
            // 执行搜索逻辑
            this.performSearch();
        },
        clearHistory() {
            this.searchHistory = [];
        },
        selectGuess(item) {
            this.searchKeyword = item.name;
            this.addToHistory(item.name);
            this.searchResult = [];
            // 执行搜索逻辑
            this.performSearch();
        },
        performSearch() {
            if (!this.searchKeyword.trim()) {
                this.$toast && this.$toast('请输入搜索关键词');
                return;
            }

            // 添加到搜索历史
            this.addToHistory(this.searchKeyword);

            // 根据搜索类型跳转到不同的结果页面
            if (this.searchType === 'notes') {
                // 跳转到作品搜索结果页面
                this.$router.push({
                    path: '/search-result',
                    query: { 
                        keyword: this.searchKeyword,
                        type: 'notes'
                    }
                });
            } else {
                // 跳转到用户搜索结果页面
                this.$router.push({
                    path: '/user-search-result',
                    query: { 
                        keyword: this.searchKeyword,
                        type: 'users'
                    }
                });
            }
        },
        goToTrend(item) {
            // 跳转到热点详情
            console.log(`跳转到热点: ${item.title}`);
        },
        refreshGuessList() {
            // 模拟刷新猜你想搜列表
            const refreshBtn = document.querySelector('.refresh-btn');
            refreshBtn.classList.add('rotating');
            this.$toast && this.$toast('正在刷新猜你想搜...');
            
            setTimeout(() => {
                this.guessList = [...this.guessList].sort(() => Math.random() - 0.5);
                refreshBtn.classList.remove('rotating');
                this.$toast && this.$toast('刷新成功');
            }, 1000);
        },
        showFeedback() {
            // 显示反馈弹窗
            this.$dialog && this.$dialog.confirm({
                title: '反馈',
                message: '您对"猜你想搜"有什么建议吗？',
                confirmButtonText: '提交',
                cancelButtonText: '取消'
            }).then(() => {
                this.$toast && this.$toast('感谢您的反馈！');
            }).catch(() => {
                this.$toast && this.$toast('已取消');
            });
        }
    },
    created() {
        // 从本地存储获取历史记录
        const savedHistory = localStorage.getItem('xiaohongshu_search_history');
        if (savedHistory) {
            this.searchHistory = JSON.parse(savedHistory);
        }
    },
    watch: {
        searchHistory: {
            handler(newVal) {
                // 保存历史记录到本地存储
                localStorage.setItem('xiaohongshu_search_history', JSON.stringify(newVal));
            },
            deep: true
        }
    }
}
</script>

<style scoped>
.search-container {
    width: 750px;
    margin: 0 auto;
    background-color: #fff;
    min-height: 100vh;
    position: relative;
    overflow-x: hidden;
    padding-bottom: 40px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* 优化滚动条 */
.search-container::-webkit-scrollbar {
    width: 6px;
}

.search-container::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.search-container::-webkit-scrollbar-thumb {
    background: #ff8a9b;
    border-radius: 3px;
}

.search-container::-webkit-scrollbar-thumb:hover {
    background: #ff2442;
}

/* 统一过渡效果 */
* {
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 点击反馈效果 */
button:active,
.result-item:active,
.guess-item:active,
.trend-item:active {
    transform: scale(0.98);
}

/* 统一红色调 */
.icon-sousuo1,
.icon-clear,
.icon-Edit-yitusoutu {
    color: #ff4757 !important;
}

/* 卡片悬停效果优化 */
.result-item:hover,
.guess-item:hover,
.trend-item:hover {
    box-shadow: 0 6px 24px rgba(255, 36, 66, 0.12) !important;
}

/* 搜索头部 */
.search-header {
    display: flex;
    align-items: center;
    padding: 16px 24px;
    background-color: #fff;
    border-bottom: 1px solid #f0f0f0;
    position: sticky;
    top: 0;
    z-index: 10;
}

.back-btn {
    background: none;
    border: none;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333;
    font-size: 28px;
    transition: all 0.2s ease;
    border-radius: 50%;
}

.back-btn:hover {
    background-color: #f5f5f5;
}

.search-box {
    flex: 1;
    height: 72px;
    background-color: #f7f7f7;
    border-radius: 36px;
    display: flex;
    align-items: center;
    padding: 0 24px;
    margin: 0 16px;
    position: relative;
    transition: all 0.2s ease;
}

.search-box:focus-within {
    background-color: #fff;
    box-shadow: 0 0 0 2px rgba(255, 36, 66, 0.2);
}

.search-box .icon-sousuo1 {
    font-size: 28px;
    color: #999;
    margin-right: 12px;
}

.search-box input {
    flex: 1;
    height: 100%;
    background: none;
    border: none;
    outline: none;
    font-size: 28px;
    color: #333;
    font-weight: 500;
    caret-color: #ff2442;
}

.search-box input::placeholder {
    color: #999;
    font-weight: normal;
}

.search-box .icon-Edit-yitusoutu {
    position: absolute;
    right: 24px;
    font-size: 32px;
    color: #999;
    transition: color 0.2s ease;
}

.search-box .icon-Edit-yitusoutu:hover {
    color: #ff2442;
}

.clear-btn {
    background: none;
    border: none;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #999;
    font-size: 24px;
    margin-right: 8px;
    transition: all 0.2s ease;
    border-radius: 50%;
}

.clear-btn:hover {
    color: #ff2442;
    background-color: rgba(255, 36, 66, 0.1);
}

.cancel-btn {
    background: none;
    border: none;
    color: #666;
    font-size: 28px;
    font-weight: 500;
    white-space: nowrap;
    padding: 8px 12px;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.cancel-btn:hover {
    color: #ff2442;
    background-color: rgba(255, 36, 66, 0.1);
}

/* 搜索类型选择器 */
.search-type-selector {
    padding: 16px 24px;
    background-color: #f8f8f8;
    border-bottom: 1px solid #eee;
}

.type-options {
    display: flex;
    gap: 16px;
}

.type-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 20px;
    color: #666;
    font-size: 24px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.type-btn:hover {
    border-color: #ff2442;
    color: #ff2442;
}

.type-btn.active {
    background-color: #ff2442;
    border-color: #ff2442;
    color: #fff;
}

.type-btn.active i {
    color: #fff !important;
}

/* 搜索结果 */
.search-result {
    padding: 0 24px;
    margin-top: 16px;
}

.result-item {
    display: flex;
    align-items: center;
    height: 96px;
    padding: 0 24px;
    margin-bottom: 8px;
    background-color: #fff;
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
    transition: all 0.2s ease;
}

.result-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.result-item i {
    font-size: 24px;
    color: #ff2442;
    margin-right: 16px;
}

.result-item span {
    font-size: 28px;
    color: #333;
    font-weight: 500;
}

/* 搜索历史 */
.search-history {
    padding: 0 24px;
    margin-top: 24px;
}

.history-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 80px;
}

.history-header h3 {
    font-size: 28px;
    color: #333;
    font-weight: 600;
}

.clear-history {
    background: none;
    border: none;
    display: flex;
    align-items: center;
    color: #999;
    font-size: 24px;
    transition: color 0.2s ease;
}

.clear-history:hover {
    color: #ff2442;
}

.clear-history i {
    margin-right: 8px;
}

.history-tags {
    display: flex;
    flex-wrap: wrap;
    padding-bottom: 24px;
}

.history-tags span {
    background-color: #fff;
    border: 1px solid #f0f0f0;
    border-radius: 30px;
    padding: 12px 24px;
    font-size: 24px;
    color: #333;
    margin-right: 16px;
    margin-bottom: 16px;
    transition: all 0.2s ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
}

.history-tags span:hover {
    background-color: #ffebee;
    border-color: #ffcdd2;
    color: #ff2442;
    box-shadow: 0 4px 12px rgba(255, 36, 66, 0.1);
}

/* 猜你想搜 */
.guess-search {
    padding: 0 24px;
    margin-top: 24px;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 80px;
}

.section-title {
    font-size: 28px;
    color: #333;
    font-weight: 600;
}

.section-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.divider {
    color: #e0e0e0;
    font-size: 24px;
}

.guess-items {
    background-color: #fff;
    border-radius: 24px;
    box-shadow: 0 8px 32px rgba(255, 36, 66, 0.08);
    padding: 16px;
    display: flex;
    gap: 24px;
}

.guess-column {
    flex: 1;
    min-width: 0;
}

.guess-item {
    display: flex;
    align-items: center;
    padding: 24px;
    margin: 0;
    transition: all 0.2s ease;
    cursor: pointer;
    position: relative;
}

.guess-item:hover {
    background-color: #fff9f9;
}

.guess-item:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: 0;
    height: 1px;
    background-color: rgba(255, 36, 66, 0.1);
}

.guess-item .item-content h4 {
    font-size: 28px;
    color: #333;
    font-weight: 500;
    transition: color 0.2s ease;
}

.guess-item:hover .item-content h4 {
    color: #ff2442;
}

.refresh-btn {
    transition: transform 0.5s ease;
}

.refresh-btn.rotating {
    animation: rotate 1s linear infinite;
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.item-content {
    flex: 1;
}

.item-content {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
}

.item-content h4 {
    font-size: 28px;
    color: #333;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}

.item-content .trend-tag {
    flex-shrink: 0;
    font-size: 20px;
    padding: 4px 8px;
    border-radius: 4px;
    font-weight: 500;
}

.item-content p {
    font-size: 24px;
    color: #999;
}

/* 小红书热点 */
.hot-trends {
    padding: 0 24px;
    margin-top: 24px;
    padding-bottom: 40px;
}

.trend-header {
    display: flex;
    align-items: center;
    height: 80px;
}

.trend-header .section-title {
    margin-left: 12px;
    color: #ff2442;
}

.trend-items {
    background-color: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    padding: 16px 0;
}

.trend-item {
    display: flex;
    align-items: center;
    padding: 20px 24px;
    margin: 0;
    transition: all 0.2s ease;
    cursor: pointer;
}

.trend-item:hover {
    background-color: #fff9f9;
}

.trend-item:not(:last-child) {
    border-bottom: 1px solid #f0f0f0;
}

.trend-rank {
    flex: 0 0 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 600;
    margin-right: 16px;
    transition: all 0.2s ease;
}

.trend-rank.top-one {
    background-color: #ff2442; /* 第一名小红书红 */
    color: #fff;
}

.trend-rank.top-two {
    background-color: #ff9500; /* 第二名橙色 */
    color: #fff;
}

.trend-rank.top-three {
    background-color: #ff8a9b; /* 第三名粉色 */
    color: #fff;
}

.trend-content {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

.trend-title {
    font-size: 28px;
    color: #333;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.2s ease;
}

.trend-item:hover .trend-title {
    color: #ff2442;
}

.trend-tag {
    font-size: 20px;
    padding: 4px 8px;
    border-radius: 4px;
    font-weight: 500;
    white-space: nowrap;
}

.trend-tag[data-tag="热"] {
    background-color: #ffebee;
    color: #ff2442;
}

.trend-tag[data-tag="新"] {
    background-color: #e8f5e9;
    color: #4caf50;
}

.trend-tag[data-tag="独家"] {
    background-color: #f3e5f5;
    color: #9c27b0;
}

.hot-value {
    flex-shrink: 0;
    font-size: 22px;
    color: #ff2442;
    font-weight: 500;
    white-space: nowrap;
    margin-left: auto;
}

.hot-value:before {
    content: "🔥";
    margin-right: 4px;
}

.top-three .trend-title {
    font-weight: 600;
}
</style>
    